<template>
  <div class="search-history-container">
  <van-cell title="历史记录">
      <template #default>
          <!-- <div class="delete-icon" v-if="isShowDeleteIcon"><van-icon name="delete-o" @click="isShowDeleteIcon = false"/></div> -->
          <div class="delete-text" ><span @click="onDeleteHistory">清空所有历史记录</span></div>
      </template>
  </van-cell>
    <div class="history-record">
        <van-cell :title="item" v-for="(item,index) in searchHistory" :key="index" @click="$emit('search',item)">
          <!-- 因为后台接口只让删除所有的历史记录,为了省事干脆直接不显示单个删除图标了,直接删除所有的 -->
            <!-- <template>
                <van-icon name='close' @click="deleteHistory(item)"></van-icon>
            </template> -->
        </van-cell>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { storageMinxis } from '../../../mixins/storage'
import { deleteHistory } from 'network/search'
export default {
  name: 'SearchHistory',
  mixins: [storageMinxis],
  data () {
    return {
      // 是否显示删除图片
      isShowDeleteIcon: true
    }
  },
  props: {
    // 要遍历的搜索历史数据
    searchHistory: {
      type: Array
    }
  },
  methods: {
    onDeleteHistory () {
      if (this.userState) {
        deleteHistory().then(res => {
          console.log(res)
        })
      } else {
        this.removeItem('userSearchHistory')
        this.$emit('update-localhistory')
      }
    }
  },
  computed: {
    ...mapState(['userState'])
  }
}
</script>

<style>

</style>
